<template>
  <div class="warp">
    <PageHeader
      title="用户信息"
      :formData="formData"
      :formConfig="formConfig"
      :btnGroup="headerBtnGroup"
    ></PageHeader>

    <PageTable
      :tableData="tableData"
      :tableConfig="tableConfig"
    ></PageTable>

    <pageFooter :pageOption="{page: params.page, pagesize: params.pagesize, total}" @search="searchList"></pageFooter>
	
  </div>

  <addDialog
    ref="addDialogRef"
    :sexOptions="sexOptions"
    :roleOptions="roleOptions"
    @search="searchList"
  ></addDialog>
</template>

<script setup name="user">
import { ref, reactive, toRaw, computed } from "vue";
import {
  Search,
  Plus,
  Delete,
  Edit,
  Upload,
  Pointer,
} from "@element-plus/icons-vue";
import PageHeader from "./PageHeader.vue";
import PageTable from "./PageTable.vue";
import PageFooter from "./PageFooter.vue";
import addDialog from "./addDialog.vue";
import { useUserStore } from "@/stores/user";
import { useMessage } from "@/hooks/message";
import {
  getUserListApi,
  addUserApi,
  updateUserApi,
  delUserApi,
  getRoleOptionApi,
  getSexOptionApi,
} from "@/api/user";
import {filterKeyNull, getOptionLabel} from '@/utils/index';
import moment from "moment";

const message = useMessage();
const userStore = useUserStore();
const addDialogRef = ref(null);
const roleOptions = ref([]);
const sexOptions = ref([]);
let params = reactive({
	page: 1,
	pagesize: 10,
})
const total = ref(0);
const tableData = ref([]);

// 查询列表
const searchList = (option = {}) => {
  console.log("search---->", option);
	// params = Object.assign(params, option)
	params = { ...params, ...option };
	params = filterKeyNull(params)
	console.log("search--api-->", params);

	getUserListApi(params).then((res) => {
		tableData.value = res.data.map((row) => {
		// row.sexTxt = sexOptions.value.find((val) => val.id == row.sex)?.label;
		// row.roleTxt = roleOptions.value.find((val) => val.id == row.role)?.label;
		// row.createdAt = moment(res.createdAt).format("YYYY-MM-DD HH:mm:ss");
		// row.updatedAt = moment(res.updatedAt).format("YYYY-MM-DD HH:mm:ss");
		return row;
	});

    total.value = res.total;
  });
};
searchList();

const formData = reactive({
  username: "",
  age: "",
  sex: "",
  role: "",
  createdAt: "",
});

const formConfig = computed(() => {
  return {
    inline: true,
    labelWidth: 'auto',
    itemList: [
      {type: 'input', label: '用户名', prop: 'username',  placeholder: '请输入', rules: [], clearable: true,},
      {type: 'input', label: '年龄', prop: 'age',   placeholder: '请输入', rules: [], clearable: true,},
      {type: 'select', label: '性别', prop: 'sex',  placeholder: '请输入', 
        option: [
          {label: "男", id: '1'},
          {label: "女", id: '2'},
        ],
      },
      {type: 'select', label: '角色', prop: 'role',  placeholder: '请输入', 
        optionLabel: 'label', optionValue: 'id', option: roleOptions.value,
      },
      {type: 'date', label: '创建日期', prop: 'createdAt',  placeholder: '请选择',},
    ]
  }
})

// const formConfig = {
//     inline: true,
//     labelWidth: 'auto',
//     itemList: [
//       {type: 'input', label: '用户名', prop: 'username',  placeholder: '请输入', rules: [], clearable: true,},
//       {type: 'input', label: '年龄', prop: 'age',   placeholder: '请输入', rules: [], clearable: true,},
//       {type: 'select', label: '性别', prop: 'sex',  placeholder: '请输入', 
//         option: [
//           {label: "男", id: '1'},
//           {label: "女", id: '2'},
//         ],
//       },
//       {type: 'select', label: '角色', prop: 'role',  placeholder: '请输入', 
//         optionLabel: 'label', optionValue: 'id', option: roleOptions.value,
//       },
//       {type: 'date', label: '创建日期', prop: 'createdAt',  placeholder: '请选择',},
//     ]
//   }


const headerBtnGroup = [
  {text: '搜索', type: 'primary', icon: Search, permisson: 4001, onClick: searchClick },
  {text: '重置', type: 'danger', icon: Pointer, permisson: 4002, onClick: resetClick },
  {text: '新增用户', type: 'primary', icon: Plus, plain: true, permisson: 4003, onClick: addClick },
]
function searchClick(formData, formRef)  {
  // console.log('searchClick---', formData, formRef);
  searchList({...formData, page: 1})
}
function resetClick(formData, formRef)  {
  formRef.reset()
}
function addClick(formData, formRef)  {
  addDialogRef.value.show({ title: "新增" });
}


/**
 * pageTable 配置及方法
 * 
 */
const tableConfig = {
  border: true,
  list: [
    {label: '序号',  width: 80, type: 'index', fixed: 'left'},
    {label: '用户名', prop: 'username', width: 100, showOverflowTooltip: false, type:'default' },
    {label: '密码', prop: 'password', width: 100},
    {label: '年龄', prop: 'age'},
    {label: '性别', prop: 'sex', formatter: sexFormatter},
    {label: '角色', prop: 'role', formatter: roleFormatter},
    {label: '创建日期', prop: 'createdAt', width: 200, formatter: dateFormatter},
    {label: '手机号', prop: 'phone', width: 120},
    {label: '用户id', prop: 'userid', width: 150, showOverflowTooltip: true,},
    {label: '头像', prop: 'photo', width: 150, showOverflowTooltip: true,},
    {label: '修改日期', prop: 'updatedAt', width: 200, formatter: dateFormatter},
    {label: '操作', fixed: 'right', minWidth: 120, btnGroup: [
      {text: '编辑', type: 'primary', onClick: editClick },
      {text: '删除', type: 'danger', onClick: delClick },
    ]},
  ]
}

function sexFormatter(cellVal, prop, scope)  {
  return getOptionLabel(sexOptions.value, cellVal, 'id')?.label
}
function roleFormatter(cellVal, prop, scope)  {
  return getOptionLabel(roleOptions.value, cellVal, 'id')?.label
}
function dateFormatter(cellVal, prop, scope)  {
  // console.log(prop, scope.row[prop]);
  return moment(scope.row[prop]).format("YYYY-MM-DD HH:mm:ss")
}

function editClick(row)  {
  console.log('editClick---', row);
  // addDialogRef.value.show({ title: "编辑", form: row });
  addDialogRef.value.show({ title: "编辑", form: toRaw(row) });
}
function delClick(row)  {
  console.log('delClick---', row);
  delUserApi(row.userid).then((res) => {
    searchList()
    message.success(res.msg);
  });
}


// 获取下拉框选项
const getOptions = () => {
  // 获取角色options
  getRoleOptionApi().then((res) => {
    roleOptions.value = res.data;
  });
  // 获取性别options
  getSexOptionApi().then((res) => {
    sexOptions.value = res.data;
  });
}
getOptions()

</script>

<style lang="less" scoped>
.warp {
}
</style>
